<template>
  <div class="department-container">
    <div class="app-container">
      <!-- 具体页面结构 -->
      <el-row type="flex" justify="space-between" align="middle" style="height: 60px">
        <el-col :span="20">
          <span>江苏传智播客教育科技股份有限公司</span>
        </el-col>
        <el-col :span="4">
          <!-- 两个内容 -->
          <el-row type="flex" justify="end">
            <el-col>负责人</el-col>
            <el-col>
              <!-- 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                  <el-dropdown-item>编辑员工</el-dropdown-item>
                  <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 树形 -->
      <!-- 如果后端返回的数据不是label children名称的，可以通过 props修改默认值 -->
      <el-tree :data="list" :default-expand-all="true" :props="defaultProps">
        <template #default="{ data }">
          <el-row type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
            <el-col :span="20">
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <!-- 两个内容 -->
              <el-row type="flex" justify="end">
                <el-col>{{ data.manager }}</el-col>
                <el-col>
                  <!-- 下拉菜单 -->
                  <el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item @click.native="addDept(data)">添加子部门</el-dropdown-item>
                      <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
                      <!-- 这个用原生点击事件无法识别，需要 native 挂载到最近的dom元素上-->
                      <el-dropdown-item @click.native="removeDep(data)">删除删除</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <!-- 添加部门弹出层 -->
    <add-dept
      ref="deptRef"
      :dialog-visible="dialogVisible"
      :node-data="nodeData"
      :original-data="originalData"
      @pull-list="pullList"
      @close-dialog="closeDialog"
    />
  </div>
</template>

<script>
import { getDepartments, delDepartments } from '@/api/departments'
// 工具函数，将平面数组，转为树形数组
import { treeDiagramList } from '@/utils/index'
// 引入添加部门组件
import AddDept from './components/add-dept'

export default {
  name: 'Organization',
  components: {
    AddDept
  },
  data() {
    return {
      list: [],
      // 修改树形默认值
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      dialogVisible: false, // 控制子组件，添加部门弹出层显示隐藏
      nodeData: {}, // 当前点击的数据，传递给子组件
      originalData: [] // 列表的原始数据，没有经过树形处理
    }
  },
  mounted() {
    this.hGetDepartments()
  },
  methods: {
    // 获取部门
    async hGetDepartments() {
      const res = await getDepartments()
      // 把原始平面数据保存起来,为的是子组件编的时候，需要用到code值来作验证区分
      this.originalData = res.depts
      this.list = treeDiagramList(res.depts) // 平面数据 转树形结构
    },
    // 删除部门
    removeDep(data) {
      this.$confirm('此操作将永久删除该部门, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          await delDepartments(data.id)
          this.hGetDepartments()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        } catch (e) {
          this.$message({
            type: 'error',
            message: `${e.message}`
          })
        }
      }).catch(() => {})
    },
    // 点击显示添加部门弹层
    addDept(data) {
      // console.log(data)
      this.dialogVisible = true
      // 传递数据过去，为了获取部门id
      this.nodeData = data
    },
    // 编辑
    editDept(data) {
      this.dialogVisible = true
      this.nodeData = data // 记录当前点击的数据
      // 调用子组件里根据当前点击的id获取数据信息
      this.$refs.deptRef.hGetDepartDetail(data.id)
    },
    // 重新拉取数据
    pullList() {
      this.hGetDepartments()
      this.dialogVisible = false
    },
    // 关闭弹出层
    closeDialog(flag) {
      // 关闭弹窗
      this.dialogVisible = flag
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
